@import url(public.css);
@import url(basic.css);
@import url(style.css);

.container .top-warrper {
    height: 35rem;
}

.container .top-warrper::after {
    height: 35rem;
    top: -10rem;
}

.container .top-warrper h1.title {
    position: absolute;
    width: 10rem;
    top: 3rem;
    color: var(--main-white-color);
    left: 50%;
    transform: translateX(-50%);
    font-weight: 600;
    font-size: 1.6rem;
    background: url(../img/vector.png) no-repeat;
    background-size: 1.6rem;
    background-position-x: 8.3rem;
    z-index: 1;
}


.container .top-warrper .search-bar,
.container .top-warrper .serch-bottom-bar {
    position: absolute;
    width: 100%;
    padding: 2.1rem;
    top: 4.5rem;
    z-index: 1;
}

.container .search-bar input {
    width: 25.3rem;
    height: 3.6rem;
    border-radius: 1rem;
    background-color: var(--main-white-color);
    color: var(--main-black-4);
    padding-left: 3.5rem;
}

.container .search-bar .me-search {
    width: 2rem;
    height: 2rem;
    background: url(../img/search.png) no-repeat;
    position: absolute;
    top: 2.9rem;
    left: 2.9rem;
}

.container .search-bar .me-email,
.container .search-bar .me-info,
.container .serch-bottom-bar .me-position,
.container .serch-bottom-bar .me-down {
    width: 2.1rem;
    height: 2.1rem;
    position: absolute;
}

.container .search-bar .me-email {
    background: url(../img/messge.png) no-repeat;
    top: 2.9rem;
    right: 6rem;
}

.container .search-bar .me-info {
    background: url(../img/info.png) no-repeat;
    background-size: 2.4rem;
    top: 2.5rem;
    right: 2rem;
}

.container .search-bar .me-info.active::after,
.container .search-bar .me-email.active::after {
    position: absolute;
    content: "";
    width: .6rem;
    height: .6rem;
    border-radius: .3rem;
    background: var(--main-red);
    top: 0rem;
    right: 0rem;
}

.container .top-warrper .serch-bottom-bar {
    top: 11rem;
}

.container .serch-bottom-bar span {
    position: absolute;
    top: 2rem;
    left: 4.1rem;
    color: var(--main-white-color);
}

.container .serch-bottom-bar .me-position {
    background: url(../img/carbon_location.png) no-repeat;
    top: 2rem;
    left: 2.1rem;
}

.container .serch-bottom-bar .me-down {
    background: url(../img/chevron-down.png) no-repeat;
    top: 2rem;
    right: 1.5rem;
}

.container .top-warrper .banner-warrper {
    position: absolute;
    top: 15.5rem;
    height: 20rem;
    width: 163.1rem;
    padding: 2rem;
    z-index: 1;
    display: flex;
}

.container .banner-warrper .box {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 30.7rem;
    height: 16.3rem;
    border-radius: 1.4rem;
    margin-right: 2.4rem;
    background-image: linear-gradient(to bottom, var(--main-color-1) 0%, var(--main-color-1) 0%, var(--main-color-2) 100%, var(--main-color-2) 100%);
    box-shadow: 0 2px 6px var(--main-black-1);
    overflow: hidden;
}

.container .banner-warrper div:nth-last-child(1) {
    margin-right: 0;
}

.container .banner-warrper .box .left {
    width: 12rem;
    color: var(--main-white-color);
}

.container .banner-warrper .box .z-txt,
.container .banner-warrper .box h1.percent {
    position: relative;
    padding: 0 2rem;
    font-size: 1.8rem;
    line-height: 2.2rem;
    color: var(--main-white-color);
    font-weight: 600;
    text-shadow: .25rem 0 var(--main-gold);
}

.container .banner-warrper .box h1.percent {
    font-size: 4.2rem;
}

.container .banner-warrper .box .left a p {
    color: var(--main-black-4);
    background-color: var(--main-gold);
    height: 1.8rem;
    width: 8.5rem;
    text-align: center;
    line-height: 1.8rem;
    border-radius: 1rem;
    margin-left: 2rem;
}

.container .banner-warrper .box .right {
    position: relative;
    width: 18rem;
}

.container .banner-warrper .box .right::after {
    position: absolute;
    content: "";
    width: 40rem;
    height: 32.6rem;
    border-radius: 50%;
    background-color: var(--main-gold);
    top: -50%;
    left: 35%;
}

.container .banner-warrper .box .img-box {
    position: absolute;
    width: 20rem;
    height: 15rem;
    bottom: 0;
    right: -6rem;
    z-index: 1;
}

.container .banner-warrper .box .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container .slider-warrper ul {
    position: absolute;
    margin-left: 2rem;
    bottom: -0.8rem;
}

.container .slider-warrper ul li {
    float: left;
    width: 1rem;
    height: 1rem;
    margin: 0rem .5rem;
    border-radius: .5rem;
    background-color: var(--main-gray);
}

.container .slider-warrper ul li.active {
    background-color: var(--main-color-2);
    width: 2.5rem;
}

.container .context-warrper {
    width: 100%;
    padding: 2rem;
}

.container .me-type {
    position: relative;
    width: 45rem;
    height: 18rem;
}

.container .me-type::after {
    position: absolute;
    content: "";
    bottom: -1rem;
    left: -2.5rem;
    width: 100%;
    height: .1rem;
    background-color: var(--main-gray);
}

.container .me-type h2,
.container .me-share h2 {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 8.5rem;
}

.container .context-warrper .box {
    margin-right: 2.6rem;
    float: left;
    text-align: center;
}

.container .context-warrper .me-type .img-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.3rem;
    height: 5.3rem;
    background-color: var(--main-color-green-2);
    border-radius: 1.5rem;
}

.container .me-share {
    margin-top: 2rem;
    width: 45rem;
}

.container .me-share .top {
    display: flex;
    width: 37.5rem;
    justify-content: space-between;
    align-items: center;
    height: 4rem;
}

.container .me-share .top p {
    color: var(--main-color-2);
    margin-right: 6.5rem;
    width: 4rem;
    background: url(../img/right.png) no-repeat;
    background-position-x: 3rem;
    background-position-y: .1rem;
}

.container .me-share .box {
    width: 13rem;
    height: 13rem;
    margin-right: 1.5rem;
    margin-bottom: 12rem;
    float: left;
}

.container .bottom-bar {
    width: 37.5rem;
    position: fixed;
    padding: 0 2.5rem;
    bottom: 0;
    height: 10rem;
    background-color: var(--main-white-color);
    box-shadow: 0rem -2rem 4rem var(--main-black-1);
    border-radius: 5rem 5rem 0 0;
}

.container .bottom-bar ul {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.container .bottom-bar ul li.active {
    position: relative;
}

.container .bottom-bar ul li.active::after {
    position: absolute;
    content: "";
    width: .6rem;
    height: .6rem;
    border-radius: .3rem;
    background-color: var(--main-red);
    top: 0;
    right: 0;
}

.container .bottom-bar ul li svg {
    transition: all .3s ease-in-out;
    fill: var(--main-gray);
}

.container .bottom-bar svg.home.active .house {
    d: path("M925.866667 396.8l-32-27.733333c-78.933333-66.133333-185.6-157.866667-320-273.066667l-12.8-10.666667C533.333333 61.866667 490.666667 61.866667 462.933333 85.333333l-151.466666 130.133334c-85.333333 72.533333-155.733333 132.266667-211.2 179.2-17.066667 12.8-25.6 32-25.6 53.333333v4.266667c2.133333 38.4 34.133333 66.133333 70.4 66.133333H192v358.4c0 29.866667 23.466667 53.333333 53.333333 53.333333h164.266667c27.733333-2.133333 49.066667-25.6 49.066667-53.333333v-185.6c0-12.8 8.533333-21.333333 21.333333-21.333333h64c12.8 0 21.333333 8.533333 21.333333 21.333333v185.6c0 29.866667 23.466667 53.333333 53.333334 53.333333h164.266666c27.733333-2.133333 49.066667-25.6 49.066667-53.333333V518.4h46.933333c38.4 0 70.4-32 70.4-70.4 0-21.333333-8.533333-38.4-23.466666-51.2z");
}

.container .bottom-bar svg.like.active .heart {
    d: path("M1000 248Q976.992 192 933.984 148.992 849.984 64 732.992 64q-64 0-121.504 28T512 171.008q-42.016-51.008-99.488-79.008T291.008 64Q174.016 64 90.016 150.016 47.008 193.024 24 249.024-0.992 308.032 0 371.04q0.992 68.992 28.992 130.496t79.008 104.512q4.992 4 8.992 8 14.016 12 112.992 102.016 208 191.008 256.992 235.008 11.008 8.992 24.992 8.992t24.992-8.992q32.992-30.016 180.992-164.992 158.016-144 196-179.008 52-43.008 80.992-104.992t28.992-132q0-64-24-122.016z");
}

.container .bottom-bar svg.shoop.active .top {
    d: path("M940.8 284.8c-16-19.2-38.4-28.8-64-28.8H249.6l-22.4-112C220.8 99.2 182.4 64 134.4 64H96c-19.2 0-32 16-32 32s12.8 32 32 32h38.4c12.8 0 25.6 9.6 28.8 25.6L192 310.4l51.2 371.2C249.6 729.6 288 768 332.8 768h486.4c44.8 0 83.2-32 89.6-73.6L960 355.2c3.2-25.6-3.2-51.2-19.2-70.4z");
}

.container .bottom-bar svg.shoop.active .circle1 {
    d: path("M323.2 896m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z");
}

.container .bottom-bar svg.shoop.active .circle2 {
    d: path("M832 896m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z");
}

.container .bottom-bar svg.user.active .header {
    d: path("M593.024 499.2c102.4-34.176 174.976-130.176 174.976-243.2C768 115.2 652.8 0 512 0S256 115.2 256 256c0 113.024 72.576 209.024 174.976 243.2-181.376 36.224-345.6 189.824-345.6 375.424 0 83.2 66.176 149.376 149.376 149.376h554.624c83.2 0 149.376-66.176 149.376-149.376-0.128-185.6-164.352-339.2-345.728-375.424z");
}

.container .bottom-bar ul li svg.active {
    transform: scale(1.1);
    fill: var(--main-color-2);
}